import MyUpload from '@/components/MyUpload';
import { organInfo } from '@/services/org/OrganService';
import {
  ProForm,
  ProFormItem,
  ProFormSwitch,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { useMount, useRequest } from 'ahooks';
import { message } from 'antd';
import React, { useState } from 'react';

const LAYOUT_TYPE_HORIZONTAL = 'horizontal';
const ConfigSetting: React.FC = () => {
  const [form] = ProForm.useForm();
  const [dataInfo, setDataInfo] = useState<API.Organ>();
  const { data: data, loading, runAsync: runInfo } = useRequest(organInfo);
  useMount(() => {
    runInfo(1).then((res) => {
      console.log('dataRun', data);
      console.log(res);
      // @ts-ignore
      setDataInfo(res);
      form.setFieldsValue(res);
    });
  });
  // @ts-ignore
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [formLayoutType, setFormLayoutType] = useState<LayoutType>(
    LAYOUT_TYPE_HORIZONTAL,
  );
  const formItemLayout =
    formLayoutType === LAYOUT_TYPE_HORIZONTAL
      ? {
          labelCol: { span: 6 },
          wrapperCol: { span: 12 },
        }
      : null;
  return (
    <ProForm<API.Organ>
      loading={loading}
      onFinish={async (values) => {
        console.log(values);
        message.success('提交成功');
      }}
      form={form}
      {...formItemLayout}
      initialValues={dataInfo}
    >
      <ProFormText
        width="md"
        name="id"
        label="名称"
        placeholder="请输入名称"
        hidden={true}
      />

      <ProFormItem label={'图标'} name={'logoId'}>
        <MyUpload
          type={1}
          onChange={(imageId) => {
            form.setFieldValue('logoId', imageId);
          }}
        />
      </ProFormItem>
      <ProFormText
        width="md"
        name="name"
        label="名称"
        placeholder="请输入名称"
        required={true}
        rules={[{ required: true }]}
      />

      <ProFormText
        width="md"
        name="shortName"
        label="Short名称"
        placeholder="请输入名称"
        required={true}
        rules={[{ required: true }]}
      />
      <ProFormTextArea
        width="lg"
        name="remark"
        label="备注"
        placeholder="请输入名称"
        required={true}
        rules={[{ required: true }]}
      />

      <ProFormSwitch
        labelAlign={'left'}
        width="md"
        name="wxIsLogin"
        label="微信登录"
      />
      <ProFormSwitch width="md" name="accountIsLogin" label="账号登录" />

      <ProFormText
        width="md"
        name="wxAppId"
        label="微信小程序APPID"
        placeholder="请输入名称"
        required={true}
        rules={[{ required: true }]}
      />

      <ProFormText
        width="md"
        name="wxAppSecret"
        label="微信小程序APPSECRET"
        placeholder="请输入微信小程序APPSECRET"
        required={true}
        rules={[{ required: true }]}
      />
      <ProFormText
        width="md"
        name="wxMchId"
        label="微信支付MchId"
        placeholder="请输入微信支付MchId"
        required={true}
        rules={[{ required: true }]}
      />
      <ProFormText
        width="md"
        name="wxMchKey"
        label="微信支付MchKey"
        placeholder="请输入微信支付MchKey"
        required={true}
        rules={[{ required: true }]}
      />
    </ProForm>
  );
};
export default ConfigSetting;
